<script>
import outMain from "@/components/outMain.vue";
import upMoreImg from "@/components/public/upMoreImg.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { goodsAdd, goodsEdit, goodsShow } from "@/http/api";
import cropperCom from "@/components/public/cropperCom.vue";
import cropperMore from "@/components/public/cropperMore.vue";

export default {
  components: { outMain, upMoreImg, cropperCom, cropperMore },
  name: "",
  data() {
    const checkIntNumber = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      showCont: false,
      detailId: this.$route.query.id,
      imgList: [],
      formData: {
        goods_name: "",
        goods_sum: "",
        integral_sum: "",
        goods_sort: "1",
        expire_time: "",
        goods_img: "",
        goods_status: 1,
        xn_sales: 10,
        is_yj: 1,
      },
      rules: {
        goods_name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
            min: 2,
            max: 20,
          },
        ],
        goods_img: [
          {
            required: true,
            message: "请选择商品图片",
            trigger: "blur",
          },
        ],
        expire_time: [
          {
            required: true,
            message: "请选择到期时间",
            trigger: "blur",
          },
        ],
        goods_sum: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        integral_sum: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
        goods_sort: [
          {
            validator: checkIntNumber,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    getImg(arr) {
      if (arr.length > 0) {
        this.formData.goods_img = arr
          .map((item) => {
            return item.img;
          })
          .join(", ");
      } else {
        this.formData.goods_img = "";
      }
    },
    getTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const queryData = { ...this.formData };
      console.log(queryData.expire_time);
      if (typeof queryData.expire_time == "object") {
        queryData.expire_time = this.getTime(queryData.expire_time);
      } else {
        if (queryData.expire_time) {
          queryData.expire_time = queryData.expire_time.split(" ")[0];
        }
      }
      console.log(queryData);

      const { data } = this.detailId
        ? await goodsEdit(queryData)
        : await goodsAdd(queryData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      goodsShow({ integral_goods_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.formData["integral_goods_id"] = this.detailId;
          if (res.data.data.goods_img) {
            this.imgList = res.data.data.goods_img.split(",").map((item) => {
              return { img: item };
            });
          }
          console.log(this.imgList);
          this.showCont = true;
        }
      });
    },
  },
  mounted() {},
  created() {
    if (this.detailId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "新增" }}积分商品</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <div>
          <el-form :rules="rules" ref="ruleForm" :model="formData">
            <div class="flexCont" v-if="showCont">
              <el-form-item
                label="商品名称"
                label-width="120"
                prop="goods_name"
              >
                <el-input
                  placeholder="请输入商品名称"
                  v-model="formData.goods_name"
                />
              </el-form-item>
              <el-form-item label="商品类型" label-width="120" prop="is_yj">
                <el-radio-group v-model="formData.is_yj">
                  <el-radio :value="1">虚拟商品(无需邮寄)</el-radio>
                  <el-radio :value="2">实物商品(需邮寄)</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="启用状态"
                label-width="120"
                v-if="formData.goods_status != 3"
                prop="goods_status"
              >
                <el-radio-group v-model="formData.goods_status">
                  <el-radio :value="1">启用</el-radio>
                  <el-radio :value="2">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品数量" label-width="120" prop="goods_sum">
                <el-input
                  placeholder="请输入商品数量"
                  v-model="formData.goods_sum"
                  ><template #append>份</template></el-input
                >
              </el-form-item>
              <el-form-item
                label="兑换积分"
                label-width="120"
                prop="integral_sum"
              >
                <el-input
                  placeholder="请输入兑换积分"
                  v-model="formData.integral_sum"
                  ><template #append>积分</template></el-input
                >
              </el-form-item>
              <el-form-item label="排序" label-width="120">
                <el-input
                  placeholder="请输入排序"
                  v-model="formData.goods_sort"
                />
              </el-form-item>
              <el-form-item label="虚拟兑换数" label-width="120">
                <el-input
                  placeholder="请输入虚拟兑换数量"
                  v-model="formData.xn_sales"
                />
              </el-form-item>

              <el-form-item
                label="到期时间"
                label-width="120"
                prop="expire_time"
              >
                <el-date-picker
                  class="datePull"
                  v-model="formData.expire_time"
                  type="date"
                  placeholder="请选择到期时间"
                />
              </el-form-item>
              <el-form-item
                class="flexPull"
                label="商品图片"
                label-width="120"
                prop="goods_img"
              >
                <!-- <cropperCom
                  :propImg="formData.goods_img"
                  @successCropper="getImg"
                ></cropperCom> -->
                <cropper-more
                  :propImg="imgList"
                  @successCropper="getImg"
                ></cropper-more>
              </el-form-item>
            </div>
            <el-form-item class="flexPull" label=" " label-width="120">
              <btn
                :value="detailId ? '保存信息' : '确认新增'"
                @ok="saveFn"
              ></btn>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
